import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Tooltip

A tooltip displays information related to a widget when focused, hovered over, or long pressed.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.tooltip/"/>
</LinkBadgeGroup>
<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tooltip' height={300}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FTooltip(
      tipBuilder: (context, controller) => const Text('Add to library'),
      child: FButton(
        style: FButtonStyle.outline(),
        mainAxisSize: MainAxisSize.min,
        onPress: () {},
        child: Text('Long press/Hover'),
      ),
    );
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create tooltip
```

## Usage

### `FTooltip(...)`

```dart copy
FTooltip(
  controller: _controller, // FTooltipController
  style: FTooltipStyle(...),
  hover: true,
  longPress: true,
  tipAnchor: Alignment.bottomCenter,
  childAnchor: Alignment.topCenter,
  overflow: FPortalOverflow.flip,
  tipBuilder: (context, controller) => const Text('Tooltip'),
  builder: (context, controller, child) => const Text('Tooltip'),
  child: const Placeholder(),
);
```

## Examples

### Horizontal Alignment

You can change how the tooltip is aligned to the button.

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tooltip' query={{axis: 'horizontal'}} height={300}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2-3} copy
    FTooltip(
      tipAnchor: Alignment.topLeft,
      childAnchor: Alignment.topRight,
      tipBuilder: (context, controller) => const Text('Add to library'),
      child: FButton(
        style: FButtonStyle.outline(),
        mainAxisSize: MainAxisSize.min,
        onPress: () {},
        child: Text('Long press/Hover'),
      ),
    );
    ```
  </Tabs.Tab>
</Tabs>

### Long Press Only

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='tooltip' query={{hover: 'false'}} height={300}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {2-3} copy
    FTooltip(
      hover: false,
      longPress: true,
      tipBuilder: (context, controller) => const Text('Add to library'),
      child: FButton(
        style: FButtonStyle.outline(),
        mainAxisSize: MainAxisSize.min,
        onPress: () {},
        child: Text('Long press'),
      ),
    );
    ```
  </Tabs.Tab>
</Tabs>
